<template>
	<div class="warp">
		<div :id="mapId" class="map"></div>
		<slot :map="map"></slot>
	</div>
</template>
<script>
import _ from 'lodash'
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
	props: {
		plugins: Array,
		AMapUI: Object,
		mapId: {
			type: String,
			default() {
				return new Date() * 1 + ''
			}
		},
		mapOptions: {
			type: Object,
			default() {
				return {}
			}
		}
	},
	data() {
		return {
			Amap: null,
			mapDefaultOptions: {
				zoom: 12
			},
			map: null
		}
	},
	async mounted() {
		const AMap = await AMapLoader.load({
			key: this.zjyOptions.amapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
			version: '2.0', // 指定要加载的 JSAPI 的版本
			plugins: this.plugins, // 需要使用的的插件列表，如比例尺'AMap.Scale'等
			AMapUI: this.AMapUI
		})
		this.Amap = AMap
		this.initMap()
	},
	methods: {
		initMap() {
			const options = _.merge(this.mapDefaultOptions, this.mapOptions)
			this.map = new this.Amap.Map(this.mapId, options)
			this.map.on('complete', () => {
				this.$emit('mapReady', this.map, this.Amap)
			})
		}
	},
	beforeDestroy() {
		this.map && this.map.clearMap()
		this.map && this.map.destroy()
	}
}
</script>
<style lang="scss" scoped>
.warp {
	height: 100%;
	.map {
		height: 100%;
	}
}
</style>
